<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- header -->
    <%@ include file="/WEB-INF/views/include/header.jsp" %>
    <style>
        #list_sort {
            width: 100%;
            padding: 0 30px;
        }

        .title {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            padding: 0 30px;
            border-bottom: 1px solid #999;
        }

        .title div {
            flex: 1;
            height: 60px;
            line-height: 75px;
            font-size: 27px;
            color: #999;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            border-bottom: 1px solid #999;
        }

        .item div {
            flex: 1;
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            color: #999;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .gengxin {
            width: 100px;
            height: 40px;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <button class="btn btn-sm btn-success gengxin" id="updata">更新</button>
    <div class="title">
        <div>用户名</div>
        <div>姓名</div>
        <div>角色</div>
        <div>职务</div>
        <div>联系电话</div>
        <div>用户排序</div>
    </div>
    <div id="list_sort">

    </div>
</div><!-- /.main-container -->

<!-- footer -->
<%@ include file="/WEB-INF/views/include/footer.jsp" %>
<script src="<s:url value="/assets/js/Sortable.min.js"></s:url>"></script>
<script type="text/javascript">
    var sfxld = sessionStorage.getItem("sfxld")
    //领导排序，不需要使用查询条件的缓存
    if (sfxld == "true") {
        nCacheFun()
    } else {
        cacheFun()
    }

    function nCacheFun() {
        var params = {
            roleId: "01",
            deptId: "",
        }
        $.ajax({
            url: '/modules/sys/user/sortData',
            dataType: 'json',
            type: 'POST',
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (res) {
                var html = ""
                for (var i = 0; i < res.length; i++) {
                    var juese = ""
                    if (res[i].roleId == "01") {
                        juese = "县领导"
                    }
                    if (res[i].roleId == "02") {
                        juese = "主要领导"
                    }
                    if (res[i].roleId == "03") {
                        juese = "分管领导"
                    }
                    if (res[i].roleId == "04") {
                        juese = "经办人"
                    }
                    html += "<div class=\"item\">" +
                        "<div style=\"\">" + (res[i].username ? res[i].username : "") + "</div>" +
                        "<div style=\"\">" + (res[i].name ? res[i].name : "") + "</div>" +
                        "<div style=\"\">" + juese + "</div>" +
                        "<div style=\"\">" + (res[i].position ? res[i].position : "") + "</div>" +
                        "<div style=\"\">" + (res[i].mobile ? res[i].mobile : "") + "</div>" +
                        "<div style=\"\">" + (i + 1) + "</div>" +
                        "<div style=\"display: none\">" + (res[i].deptId ? res[i].deptId : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].password ? res[i].password : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].roleId ? res[i].roleId : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].sysId ? res[i].sysId : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].userSort ? res[i].userSort : "") + "</div>" +
                        "</div>"
                }
                $("#list_sort").html(html)
            }
        });
    }

    function cacheFun() {
        var params = {
            roleId: sessionStorage.getItem("sortneedId"),
            deptId: sessionStorage.getItem("sortneedUser"),
        };
        $.ajax({
            url: '/modules/sys/user/sortData',
            dataType: 'json',
            type: 'POST',
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (res) {
                var html = ""
                for (var i = 0; i < res.length; i++) {
                    var juese = ""
                    if (res[i].roleId == "01") {
                        juese = "县领导"
                    }
                    if (res[i].roleId == "02") {
                        juese = "主要领导"
                    }
                    if (res[i].roleId == "03") {
                        juese = "分管领导"
                    }
                    if (res[i].roleId == "04") {
                        juese = "经办人"
                    }
                    html += "<div class=\"item\">" +
                        "<div style=\"\">" + (res[i].username ? res[i].username : "") + "</div>" +
                        "<div style=\"\">" + (res[i].name ? res[i].name : "") + "</div>" +
                        "<div style=\"\">" + juese + "</div>" +
                        "<div style=\"\">" + (res[i].position ? res[i].position : "") + "</div>" +
                        "<div style=\"\">" + (res[i].mobile ? res[i].mobile : "") + "</div>" +
                        "<div style=\"\">" + (i + 1) + "</div>" +
                        "<div style=\"display: none\">" + (res[i].deptId ? res[i].deptId : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].password ? res[i].password : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].roleId ? res[i].roleId : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].sysId ? res[i].sysId : "") + "</div>" +
                        "<div style=\"display: none\">" + (res[i].userSort ? res[i].userSort : "") + "</div>" +
                        "</div>"
                }
                $("#list_sort").html(html)
            }
        });
    }
</script>
<script type="text/javascript">
    new Sortable(list_sort, {
        animation: 150,
        group: 'shared', // set both lists to same group
        // 元素被选中
        onChoose: function (/**Event*/evt) {
            evt.oldIndex;  // element index within parent
        },
        // 元素未被选中的时候（从选中到未选中）
        onUnchoose: function (/**Event*/evt) {
            // same properties as onEnd
        },
        // 开始拖拽的时候
        onStart: function (/**Event*/evt) {
            evt.oldIndex;  // element index within parent
        },
        // 结束拖拽
        onEnd: function (/**Event*/evt) {
            var itemEl = evt.item;  // dragged HTMLElement
            evt.to;    // target list
            evt.from;  // previous list
            evt.oldIndex;  // element's old index within old parent
            evt.newIndex;  // element's new index within new parent
            evt.clone // the clone element
            evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
        },

        // 元素从一个列表拖拽到另一个列表
        onAdd: function (/**Event*/evt) {
            // same properties as onEnd
        },
        // 列表内元素顺序更新的时候触发
        onUpdate: function (/**Event*/evt) {
            // same properties as onEnd
        },
        // 列表的任何更改都会触发
        onSort: function (/**Event*/evt) {
            // same properties as onEnd
        },
        // 元素从列表中移除进入另一个列表
        onRemove: function (/**Event*/evt) {
            // same properties as onEnd
        },
        // 试图拖拽一个filtered的元素
        onFilter: function (/**Event*/evt) {
            var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
        },
        // 拖拽移动的时候
        onMove: function (/**Event*/evt, /**Event*/originalEvent) {
            evt.dragged; // dragged HTMLElement
            evt.draggedRect; // DOMRect {left, top, right, bottom}
            evt.related; // HTMLElement on which have guided
            evt.relatedRect; // DOMRect
            evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
            originalEvent.clientY; // mouse position
            // console.log(originalEvent,evt)
        },
        // clone一个元素的时候触发
        onClone: function (/**Event*/evt) {
            var origEl = evt.item;
            var cloneEl = evt.clone;
        },
        // 拖拽元素改变位置的时候
        onChange: function (/**Event*/evt) {
            // console.log(evt.newIndex )
        }
    });
</script>
<script>
    $("#updata").click(function () {
        var items = document.querySelectorAll(".item");
        console.log(items);
        var allArr = [];
        for (let i = 0; i < items.length; i++) {
            var user = {};
            user.deptId = items[i].childNodes[6].innerText;
            user.mobile = items[i].childNodes[4].innerText;
            user.name = items[i].childNodes[1].innerText;
            user.password = items[i].childNodes[7].innerText;
            user.position = items[i].childNodes[3].innerText;
            user.roleId = items[i].childNodes[8].innerText;
            user.sysId = items[i].childNodes[9].innerText;
            user.userSort = i + 1;
            user.username = items[i].childNodes[0].innerText;
            allArr.push(user);
        }
        console.log(allArr);

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            url: '/modules/sys/user/sortDataUpdate',
            dataType: 'json',
            type: 'POST',
            data: JSON.stringify(allArr),
            contentType: 'application/json',
            success: function (res) {
                if (res.code == "200") {
                    alert("排序更新成功!");
                    location.reload();
                } else {
                    alert("排序更新失败!");
                }
            }
        })
    });
</script>
</body>
</html>